<!--
 * @Author: sichuntian sichuntian@smartmappingtek.com
 * @Date: 2024-05-23 16:24:02
 * @LastEditTime: 2024-06-05 18:40:56
 * @Description: 
 * 
-->
<template>
  <transition name="toLeft">
    <div v-if="state.show" class="left">
      <!-- <dv-border-box-1 class="project-info left-item">sdfsdf</dv-border-box-1>
            <dv-border-box-9 class="project-date left-item"></dv-border-box-9>
             -->
      <!-- <dv-border-box-9 class="project-progress left-item">
        <div class="box-entity">
          <template v-for="item in listEntity" :key="item.id">
            <div
              @click="clickFn(item)"
              :class="[
                'item-entity',
                activeId == item.id ? 'active-select' : '',
              ]"
            >
              <div class="icon-entity">
                <i :class="[item.iconfont, 'iconfont']"></i>
              </div>
              <div class="text">{{ item.title }}</div>
            </div>
          </template>
        </div>
      </dv-border-box-9> -->
      <dv-border-box-12 class="project-progress left-item">
        <el-scrollbar height="100%" class="scrollbar-class">
          <div class="marsd-entity">
            <template v-for="item in listEntity" :key="item.id">
              <div @click="clickFn(item)" class="item-entity">
                <div class="icon-entity">
                  <i :class="[item.iconfont, 'iconfont']"></i>
                </div>
                <div class="text">{{ item.title }}</div>
              </div>
            </template>
            <div
              v-for="item in mars3dEntity"
              :key="item.name"
              class="entity-model"
              @click="clickEntity(item.style)"
            >
              <el-image :src="item.image" fit="fill"></el-image>
            </div>
          </div>
        </el-scrollbar>
      </dv-border-box-12>
    </div>
  </transition>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import * as mars3d from "mars3d";
const Cesium = mars3d.Cesium;
import { getMarsMap } from "@/map/utils/mapCommon.js";
let MarsMap;
const listEntity = [
  {
    iconfont: "icon-tianjiadian",
    id: 1,
    title: "点",
  },
  {
    iconfont: "icon-tianjiaxian",
    id: 2,
    title: "线",
  },
  {
    iconfont: "icon-mian",
    id: 3,
    title: "面",
  },
  {
    iconfont: "icon-guankongqu",
    id: 4,
    title: "管控区域",
  },
  {
    iconfont: "icon-fanghuoqiang",
    id: 5,
    title: "墙",
  },
];
const mars3dEntity = ref([]);
const activeId = ref();
function clickFn(item) {
  if (!MarsMap) {
    MarsMap = getMarsMap();
    console.log(MarsMap, "MarsMap");
  }
  activeId.value = item.id;
  // if (!MarsMap) return;
  MarsMap.graphicLayer.stopDraw();
  if (item.id == 1) {
    MarsMap.graphicLayer.startDraw({
      type: "billboard",
      style: {
        image: "marker/point-yellow.png",
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
    });
  } else if (item.id == 2) {
    MarsMap.graphicLayer.startDraw({
      type: "polylineP",
      style: {
        color: "#ff0000",
        width: 6,
      },
    });
  } else if (item.id == 3) {
    MarsMap.graphicLayer.startDraw({
      type: "polygon",
      style: {
        color: "#ff0000",
        opacity: 0.6,
        clampToGround: true,
      },
    });
  } else if (item.id == 4) {
    MarsMap.drawSolidArea();
  } else if (item.id == 5) {
    MarsMap.graphicLayer.startDraw({
      type: "thickWall",
      style: {
        color: "#ff0000",
        opacity: 0.3,
        width: 10,
      },
    });
  } else if (item.id == 6) {
    // emit("changePathUrl", "models/grass.gltf");
  } else if (item.id == 7) {
    emit("changePathUrl", "models/tree.gltf");
  } else if (item.id == 8) {
    airDroneDialogVisible.value = true;
  }
}
// 获取所有模型
function getEntityList() {
  const configUrl = "//data.mars3d.cn/gltf/list.json";
  mars3d.Util.fetchJson({ url: configUrl })
    .then(function (data) {
      console.log("加载JSON成功", data);
      //   eventTarget.fire("loadModelList", { data });
      mars3dEntity.value = [
        ...formatUrl(data.测绘仪器),
        ...formatUrl(data.人物),
        ...formatUrl(data.飞机及航空),
        ...formatUrl(data.其他),
        ...formatUrl(data.建筑物),
        ...formatUrl(data.树及植物),
        ...formatUrl(data.消防设备),
        ...formatUrl(data.火车及铁路),
        ...formatUrl(data.电力设施),
        ...formatUrl(data.船及水利航海),
        ...formatUrl(data.超高机械),
        ...formatUrl(data.车辆),
      ];
      console.log(mars3dEntity.value, "value");
    })
    .catch(function (error) {
      console.log("加载JSON出错", error);
    });
}
// 格式化数据
function formatUrl(data) {
  return data.map((i) => {
    return {
      ...i,
      image: i.image.replace("{gltfServerUrl}", "//data.mars3d.cn/gltf"),
      style: {
        ...i.style,
        url: i.style.url.replace("{gltfServerUrl}", "//data.mars3d.cn/gltf"),
      },
    };
  });
}

// 点击模型
function clickEntity(style) {
  if (!MarsMap) {
    MarsMap = getMarsMap();
  }
  MarsMap.marsMap.graphicLayer.startDraw({
    type: "model",
    drawShow: true, // 绘制时，是否显示模型，可避免在3dtiles上拾取坐标存在问题。
    style,
  });
}

const state = reactive({
  show: false,
});

onMounted(() => {
  if (!MarsMap) {
    MarsMap = getMarsMap();
  }
  getEntityList();
});
function isShow(boolean) {
  state.show = boolean;
}
defineExpose({
  isShow,
});
</script>

<style scoped lang="less">
.scrollbar-class {
  padding: 10px;
}
.marsd-entity {
  padding: 15px;
  width: 100%;
  //   height: 100%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  .entity-model:nth-child(4n) {
    margin-right: 0;
  }
  .entity-model {
    width: 75px;
    margin-right: 6px;
    cursor: pointer;
  }
}
.box-entity {
  display: flex;
  flex-wrap: wrap;
  padding: 17px;
}
.item-entity {
  display: flex;
  margin-bottom: 10px;
  width: 75px;
  height: 70px;
  padding: 10px 0;
  cursor: pointer;
  background-color: #5d92ff;
  border-radius: 5px;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 6px;
  .icon-entity {
    position: relative;
  }
  .iconfont {
    padding: 5px;
    color: #fff;
    font-size: 20px;
    // background-color: black;
  }
  .text {
    margin-top: 4px;
    font-size: 14px;
    color: #fff;
  }
}
.item-entity:nth-child(4n) {
  margin-right: 0;
}
.active-select {
  background-color: #222f42 !important;
}
.entity-model {
  width: 200px;
  height: 100px;
}

.left {
  position: absolute;
  left: 0;
  top: 80px;
  width: 370px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .left-item {
    img {
      width: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
    }
  }

  .project-info {
    height: 300px;
    width: 100%;

    .content-box {
      color: #fff;
      height: calc(100% - 44px);
      overflow: auto;
      font-size: 12px;
      letter-spacing: 1px;
    }

    p {
      text-indent: 2em;
      padding: 0 15px;
    }
  }

  .project-date {
    height: 200px;
    width: 100%;

    .percent {
      box-sizing: border-box;
      width: 320px;
      height: 20px;
      margin: 0 15px;
    }
  }

  .project-progress {
    flex: 1;
    width: 100%;

    .bar {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
      padding: 0 15px;
    }
  }
}

.right {
  position: absolute;
  right: 0;
  top: 80px;
  width: 370px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<style>
.dv-percent-pond text {
  font-size: 16px;
}
</style>
